<template>
	<div>
		<div class="page-head" :class="[modelData.style === 1 ? 'style-one' : modelData.style === 2 ? 'style-two' : 'style-three']" :style="style">
			<div v-if="modelData.style === 2" :style="{ background: modelData.topBgColor }" class="circular"></div>
		</div>
		<u-navbar :background="{ background: background }" :title-color="modelData.textColor" :border-bottom="false" :is-back="false" :title="modelData.name">
			<div class="address-div ellipsis" @click="switchStore" :style="{ color: modelData.textColor }">
				<span style="margin-right: 8rpx;">选择门店</span>
				<u-icon name="arrow-down" :color="modelData.textColor" size="28"></u-icon>
			</div>
		</u-navbar>
	</div>
</template>

<script>
export default {
	name: 'NavigationBar',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	computed: {
		style() {
			if (this.modelData.style === 3) {
				return `background-color:${this.modelData.topBgColor};color:${this.modelData.textColor}`;
			} else if (this.modelData.style === 1) {
				return `background:linear-gradient(360deg,rgba(255, 255, 255, 0) 0%,${this.modelData.topBgColor} 100%,${this.modelData.topBgColor} 100%);color:${
					this.modelData.textColor
				}`;
			} else {
				return `color:${this.modelData.textColor}`;
			}
		},
		location() {
			return this.$store.state.locationObj;
		},
		background() {
			if (this.modelData.style === 1) {
				return this.$u.colorToRgba(this.$_utils.hexify(this.modelData.topBgColor), this.scrollTop/100)
			} else {
				return this.modelData.topBgColor;
			}
		}
	},
	methods: {
		switchStore() {
			this.$emit('switchStore');
		}
	}
};
</script>

<style scoped lang="scss">
.page-head {
	height: 226px;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.style-two {
	overflow: hidden;
	.circular {
		width: 140%;
		height: 200px;
		position: absolute;
		left: -20%;
		top: 0;
		background: #ec1c24;
	}
}
.address-div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 24rpx;
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 30rpx;
	font-size: 28rpx;
	font-weight: 500;
	-webkit-line-clamp: 1;
}
.style-one {
	background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, #ec1c24 100%);
}
.style-three {
	background: #ec1c24;
}
</style>
